<template>
    <el-row>
        <el-col :span="4" :offset="7">
            <el-input v-model="selectData.name" autocomplete="off" placeholder="请输入员工姓名" size="medium"></el-input>
        </el-col>
        <el-col :span="4" :offset="1">
            <el-select v-model="selectData.sex" placeholder="请选择员工性别" size="medium">
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="2"></el-option>
            </el-select>
        </el-col>
        <el-col :span="4" :offset="1">
            <el-input v-model="selectData.idCard" autocomplete="off" placeholder="请输入员工身份证号" size="medium"></el-input>
        </el-col>
        <el-col :span="3" class="paddingLeft">
            <el-button type="primary" icon="el-icon-search" @click="selectStaff" size="medium">搜索</el-button>
        </el-col>
    </el-row>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {
        name: "selectStaffBtn",
        data(){
            return{
                selectData:{
                    name:'',
                    sex:'',
                    idCard:'',
                },
            }
        },
        methods:{
            ...mapActions(['selectStaffByObj']),
            //点击查询按钮
            selectStaff(){
                // console.log(this.selectData);
                this.selectStaffByObj(this.selectData).then(res=>{
                    // console.log(res);
                    if (res.code===200){
                        this.$store.state.staffInformationStore.pages.currentPage=1;
                    }else {
                        this.$message({
                            type: 'error',
                            message: '未找到符合要求的数据！'
                        });
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .paddingLeft{
        padding-left: 3.5%;
    }
</style>